<template>
  <el-tabs
    tab-position="left"
    v-model="activeMaterial"
    class="material-tabs"
    @tab-click="handleClick">
    <el-tab-pane
      v-for="(material, index) in materialData"
      :key="index"
      label="components"
      :name="material.id"
      class="material-tabs-components">
      <template #label>
        <span class="custom-tabs-label">
          <el-tooltip effect="dark" :content="material.label" placement="right">
            <i :class="['iconfont', material.icon]"></i>
          </el-tooltip>
        </span>
      </template>
      <component :is="material.component" />
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
  import { ref } from 'vue';
  import components from './components/components';
  import dataSource from './components/dataSource';
  const activeMaterial = ref('components');
  const handleClick = () => {
    console.log('handleClick');
  };
  const materialData = [
    {
      label: '组件库',
      icon: 'icon-zujianku',
      id: 'components',
      component: components,
    },
    {
      label: '数据源',
      icon: 'icon-shujuyuanpeizhi',
      id: 'dataSource',
      component: dataSource,
    },
  ];
</script>
<style scoped lang="less">
  .material-tabs {
    height: 100%;
    background: #fff;
    :deep(.el-tabs__item) {
      padding: 0 10px;
    }
    .custom-tabs-label {
      .iconfont {
        font-size: 20px;
      }
    }
  }
</style>
